<template>
  <div>
    <ACard>
      <template #title>
        <div class="erp-row-center-between">
          <div>
            <span>销售情况</span>
          </div>
          <div>
            <ARangePicker
              v-model="SearchFrom.TotalTime"
              mode="month"
              :allow-clear="false"
              :placeholder="['汇总时间-开始', '汇总时间-结束']"
              :disabled-date="(current) => dayjs(current).isAfter(dayjs())"
              size="small"
              @change="getSalesStatusData"
            ></ARangePicker>
            <AButton
              size="small"
              type="primary"
              class="erp-ml-6"
              :loading="ExportLoading"
              @click="onExport"
            >
              导出
            </AButton>
          </div>
        </div>
      </template>
      <ATable
        :data="TableData"
        :bordered="{ cell: true }"
        column-resizable
        :scroll="{ maxHeight: 300 }"
        :pagination="false"
      >
        <template #columns>
          <ATableColumn title="客户名称" data-index="customerName" :width="100">
            <template #cell="{ record }">
              {{ record.customerName }}
            </template>
          </ATableColumn>
          <ATableColumn title="总金额" data-index="totalAmt" :width="150" align="right">
            <template #cell="{ record }">
              {{ `¥${formatPrice(record.totalAmt)}` }}
            </template>
          </ATableColumn>
          <ATableColumn
            v-for="(item, index) in TimeList"
            :key="index"
            :title="`${item}月`"
            data-index="itemDetailList"
            :width="150"
            align="right"
          >
            <template #cell="{ record }">
              {{ `¥${formatPrice(record.itemDetailList[index])}` }}
            </template>
          </ATableColumn>
        </template>
      </ATable>
      <div class="arco-table-pagination">
        <APagination
          :total="pageParam.totalCount"
          :page-size="pageParam.pageSize"
          show-total
          @change="(page: number) => tableEvent('page-change', page)"
        />
      </div>
    </ACard>
  </div>
</template>

<script lang="ts" setup>
import { formatPrice } from '@renderer/utils/mixins'
import {
  SalesStatusResItem,
  SalesStatusSearch,
  getSalesStatus
} from '@renderer/api/financialStatement'
import dayjs from 'dayjs'
const TimeList = ref<string[]>([])
const SearchFrom = ref<SalesStatusSearch>({
  TotalTime: [dayjs().startOf('year').format('YYYY-MM'), dayjs().format('YYYY-MM')],
  startDate: dayjs().startOf('year').format('YYYY-MM-01'),
  endDate: dayjs().endOf('year').format('YYYY-MM-DD')
})
const pageParam = reactive({
  currentPage: 1,
  pageSize: 20,
  totalCount: 0
})
const TableData = ref<SalesStatusResItem[]>()
const ExportLoading = ref(false)

function getSalesStatusData() {
  const [startDate, endDate] = SearchFrom.value.TotalTime || []
  SearchFrom.value.startDate = startDate ? dayjs(startDate).format('YYYY-MM-01') : ''
  SearchFrom.value.endDate = endDate ? dayjs(endDate).endOf('M').format('YYYY-MM-DD') : ''
  getSalesStatus(SearchFrom.value).then((res) => {
    TableData.value = res.data.list
    TimeList.value = res.data.titleList
    pageParam.totalCount = res.data.totalCount!
  })
}

function tableEvent(type: 'page-change', param: any) {
  switch (type) {
    case 'page-change':
      pageParam.currentPage = param
      getSalesStatusData()
      break

    default:
      break
  }
}

async function onExport() {
  ExportLoading.value = true
  console.log('导出')
  const fileTitle = '销售情况数据'
  const headerData = [
    { title: '序号', value: 'index', width: 80 },
    { title: '客户名称', value: 'customerName', width: 180 },
    { title: '总金额', value: 'totalAmt', width: 180 }
  ]
  for (let index = 0; index < TimeList.value.length; index++) {
    const element = TimeList.value[index]
    headerData.push({ title: element, value: `itemDetailList.${index}`, width: 180 })
  }
  let excelData: SalesStatusResItem[] = []
  const res = await getSalesStatus(SearchFrom.value)
  excelData = res.data.list.map((item, index) => {
    item.index = index + 1
    item.totalAmt = formatPrice(item.totalAmt, 1)
    item.itemDetailList = item.itemDetailList.map((item: string | number | undefined) =>
      formatPrice(item, 1)
    )
    return item
  })
  import('@renderer/utils/vendor')
    .then((excel) => {
      excel.exportExcel(excelData, headerData, fileTitle)
    })
    .finally(() => {
      ExportLoading.value = false
    })
}
onMounted(() => {
  getSalesStatusData()
})
</script>
<style scoped></style>
